<template>
	<view class="page-content">
		<image class="page-top" :src="datalist.img"></image>
		<view class="page-body">
			<view class="body-box">
				<view class="con-tit">
					<view class="con-title">{{datalist.title}}</view>
					<view class="con-sta">报名中</view>
				</view>
				<view class="con-txt"><text class="iconsj iconfont"></text>报名时间：{{datalist.signtime}}</view>
				<view class="con-txt"><text class="iconsj iconfont"></text>开赛时间：{{datalist.statime}}</view>
				<view class="con-txt">主办方：{{datalist.sponsor}}</view>
				<view class="con-txt">检录地点：{{datalist.address}}</view>
			</view>
			<view class="body-box">
				<block v-for="(item,index) in list" :key="index">
					<view class="con-li">
						<view class="con-li-l"><view class="con-li-l-txt">{{item.name}}({{item.num}}人)</view><view class="con-li-line"></view></view>
						<view class="con-li-r"><text class="con-li-m">¥{{item.money}}</text>/队</view>
					</view>
				</block>
			</view>
			<view class="body-box">
				<view class="con-title">赛事介绍</view>
				<rich-text class="con-text" :nodes="datalist.contxt"></rich-text>
			</view>
		</view>
		<view class="page-foot" >立即报名</view>
	</view>
</template>

<script>
	import uniSection from "@/components/uni-section/uni-section.vue"
	export default {
		components: {
			uniSection
		},
		data() {
			return {
				signsta:'2',
				datalist:{
					img:'',
					title:'2021春季城市穿越赛',
					signtime:'2021/04/01-2021/04/09',
					statime:'2021/04/15 08:00-16:00',
					sponsor:'厦门市湖里区区政府',
					address:'福建省厦门市五缘湾公园',
					contxt:'富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本'
				},
				list:[
					{
						name:'青年组',
						num:'6',
						money:'346'
					},
					{
						name:'老年组',
						num:'6',
						money:'278'
					},
					{
						name:'成年组',
						num:'6',
						money:'399'
					},
					{
						name:'情侣组',
						num:'2',
						money:'199'
					}
				]
			}
		},
		onLoad(option){
			console.log(222,option)
			/* if(option.type==1){
				//this.addressData = JSON.parse(option.data)
			} */
			// uni.setNavigationBarTitle({title})
		},
		methods: {
		
		
		}
	}
</script>

<style lang="scss">
	.page-content{
		display: flex;
		flex-direction: column;
		
	}
	.page-top{
		width: 100%;
		height: 380rpx;
	}
	.page-foot{
		position: fixed;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		font-size: 36rpx;
		font-weight: boldl;
		background-color: #02BB6F;
		height: 100rpx;
		width: 100%;
		bottom: 0;
	}
	.page-body{
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
			.body-box{
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;
				background-color: #fff;
				padding: 32rpx 30rpx;
				line-height: 60rpx;
				.con-tit{
					display: flex;
					justify-content: space-between;
					.con-title{
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
					}
					.con-sta{
						font-size: 28rpx;
						font-weight: 500;
						color: #02BB6F;
					}
				}
				.con-txt{
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}
				.con-li{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					.con-li-l{
						flex: 1;
						display: flex;
						align-items: center;
						.con-li-l-txt{
							width:180rpx;
						}
						.con-li-line{
							flex: 1;
							height: 2rpx;
							margin-right: 30rpx;
							background-color: #eee;
						}
					}
					.con-li-r{
						font-weight: bold;
						color: #333;
						.con-li-m{
							color: #FE5050;
						}
					}
				}
				.con-text{
					font-size: 28rpx;
					color: #666;
					line-height: 40rpx;
				}
			}
	}
	
</style>
